{% load i18n %}
{% load static %}

<link href="{% static 'vueAdmin/css/components/piechart.css' %}" rel="stylesheet">

<script type="text/x-template" id="demo-workplace-pie-chart">
  <a-card :bordered="false">
    <span slot="title">
      <a-icon type="link" ></a-icon> {% trans '招生占比' %}
    </span>
    <div style="text-align: center">
      <a-button-group>
        <a-button v-for="enrollYear in enrollYears" :key="'year-button-'+enrollYear" size="small" @click.native="selectEnrollYear(enrollYear)"><% enrollYear %></a-button>
      </a-button-group>
    </div>
    <a-layout-content>
      <div id="demo-pie-chart" style="text-align: center; margin: 0 auto;"></div>
      <div id="custom-tooltip" style="position: relative; width: 320px; margin: 20px auto;"></div>
    </a-layout-content>
  </a-card>
</script>

<script type="application/javascript">
Vue.prototype.$http = axios;
Vue.component('demo-workplace-pie-chart', {
  delimiters: ['<%', '%>'],
  props: ['source'],
  template: '#demo-workplace-pie-chart',
  data: function () {
    const ratioStatistic = {
      total: 0,
      ratioData: [],
      enrollYears: [],
      radioYear: '',
      chart: ''
    };
    const year = new Date().getFullYear();
    for (let i = 0; i < 5; i++) {
      ratioStatistic.enrollYears.push(year - i);
    }
    ratioStatistic.radioYear = year;
    return ratioStatistic;
  },
  mounted: function () {
    this.getEnrollRatioData(this.drawLine);
    this.chart = new G2.Chart({
      container: "demo-pie-chart",
      forceFit: true,
      height: '320',
      padding: { top: 20, left: 0, bottom: 20 },
    });
  },
  methods: {
    drawLine() {
      this.chart.coord('theta', {
        radius: 1,
        innerRadius: 0.7,
      });
      this.chart.tooltip({
        showTitle: false,
        itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>',
      });
      this.chart.legend({
        layout: 'vertical',
        allowAllCanceled: false,
        useHtml: true,
        container: 'custom-tooltip',
        itemTpl: (value, color, checked, index) => {
          const obj = this.ratioData[index];
          return (
            '<tr class="g2-legend-list-item item-{index} {checked}" data-value="{value}" data-color={color} style="cursor: pointer;font-size: 14px;margin: 20px 0">' +
            '<td width="240" style="border: none;padding:0;text-align:left;">' +
            '<i class="g2-legend-marker" style="width:10px;height:10px;display:inline-block;margin-right:16px;background-color:{color};"></i>' +
            `<span class="g2-legend-text">${obj.item}</span> <strong>|</strong> <span class="g2-pie__legend-percent">${obj.percent}%</span>` +
            '</td>' +
            `<td width="80" style="border: none;padding:0;text-align:end;"> 人数: ${obj.count}</td>` +
            '</tr>'
          );
        },
      });
      // 辅助文本
      this.chart.guide().html({
        position: ['50%', '50%'],
        html: `<div style="color:#8c8c8c;font-size: 14px;text-align: center;width: 10em;"><strong><div>${this.radioYear} 年招生人数 </div><div>${this.total}</div></strong></div>`,
        alignX: 'middle',
        alignY: 'middle',
      });
      this.chart
        .intervalStack()
        .position('percent')
        .color('item')
        .tooltip('item*percent', (item, percent) => {
          percent = `${(percent * 100).toFixed(2)}%`;
          return {
            name: item,
            value: percent,
          };
        })
        .style({
          lineWidth: 1,
          stroke: '#fff',
        });
      this.chart.source(this.ratioData, {
        percent: {
          formatter: function formatter(val) {
            val = `${(val * 100).toFixed(2)}%`;
            return val;
          },
        },
      });
      this.chart.render();
    },
    getEnrollRatioData(callback) {
      let _this = this;
      this.$http.get(_this.source, {})
          .then(function (res) {
            const data = res.data.data.ratio;
            _this.total = data.reduce((pre, now) => now.total + pre, 0);
            _this.ratioData = data.map((item) => {
              return {
                item: item.aca_cname,
                count: item.total,
                percent: item.total / _this.total,
              };
            });
            callback();
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    selectEnrollYear(value) {
      let _this = this;
      this.$http.get(_this.source, { params: { year: value }})
          .then(function (res) {
            const data = res.data.data.ratio;
            _this.total = data.reduce((pre, now) => now.total + pre, 0);
            _this.ratioData = data.map((item) => {
              return {
                item: item.aca_cname,
                count: item.total,
                percent: item.total / _this.total,
              };
            });
            _this.chart.changeData(_this.ratioData);
          })
          .catch(function (error) {
            console.log(error);
          });
    }
  }
});
</script>
